<template>
	<view>
		<view v-if="watching.length==0">
			<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="暂无记录">
			</u-empty>
		</view>

		<view v-else class="watch_list" v-for="(item,index) in watching" :key="index" @click="toVideoDetail(item)">
			<view>
				<image class="watch-pic" :src="item.tv_image"></image>
			</view>
			
			<view style="margin-left: 40rpx;">
				<u-gap height="40rpx"></u-gap>
				<view class="tv_name">{{item.tv_name}}</view>
				<u-gap height="40rpx"></u-gap>
				<view style="color: #333;font-size: 30rpx;">第{{item.series||'1'}}集</view>
			</view>
		</view>

		<u-gap height="30rpx"></u-gap>
	</view>
</template>

<script>
	const db = uniCloud.database();
	export default {
		data() {
			return {
				page: 1,
				watching: [],
			}
		},
		async onLoad() {

		},
		async onShow() {
			this.watching = [];
			vk.showLoading('加载中...');
			const watchList = await db.collection("a_like").where({
				user_id: vk.vuex.get('$user.userInfo._id')
			}).orderBy('_add_time', 'desc').limit(10).get()

			this.watching = watchList.result.data
			vk.hideLoading();
		},

		async onReachBottom() {
			const moreList = await db.collection("a_like").where({
				user_id: vk.vuex.get('$user.userInfo._id')
			}).orderBy('_add_time', 'desc').limit(10).skip(this.page * 10).get()

			this.watching = this.watching.concat(moreList.result.data)
			this.page = this.page + 1
		},
		methods: {
			async toVideoDetail(item) {
				if (item.tv_id) {
					const tvinfo = await db.collection('a_tv').doc(item.tv_id).get()
					let tv = tvinfo.result.data[0]
					vk.vuex.set('$app.currenttv', tv)
				}
				uni.navigateTo({
					url: '/pages/player/player?tv_id=' + item.tv_id + "&series=" + item.series,
				})
			},
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f1f1f1;
	}

	.watch_list {
		display: flex;
		background-color: #fff;
		margin: 20rpx;
		border-radius: 20rpx;
	}

	.tv_name {
		font-size: 32rpx;
		font-weight: 600;
		width: 500rpx;
		display: -webkit-box;
		overflow: hidden;
		white-space: normal !important;
		text-overflow: ellipsis;
		word-wrap: break-word;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.watch-pic {
		width: 167rpx;
		height: 250rpx;
		border-radius: 10rpx;
		margin: 14rpx 0rpx 14rpx 14rpx;
	}
</style>
